<template>
  <div class="inside-page">
    <div class="job-detail content">
      <Pos-Info :info="info" :post-type="postType" :city="city" :edu="edu" />
      <Pos-Desc :info="textInfo" @submit_desc="submit_desc" />
      <Pos-Other :info="otherInfo" />
    </div>
    <div class="submit">
      <button class="confirm" type="button" @click="submit">立即发布</button>
      <button class="cancel" type="button" @click="cancel">放弃编辑</button>
    </div>
  </div>
</template>

<script>
import { getJobDetail } from '@/api/company';
import { updateJob } from '@/api/job';
export default {
  asyncData: ({ req }) => ({
  }),
  components: {},
  data () {
    return {
      jobId: '',
      info: {
        city_cn: { name: '' },
        cityid: '',
        comid: '',
        duty: '',
        eid: '',
        eid_cn: '',
        end_time: '',
        end_time_cn: '',
        f_id: '',
        f_id_cn: '',
        for_bumen: '',
        is_all: '',
        is_all_cn: '',
        major: '',
        name: '',
        num: '',
        pay_end: '',
        payid: '',
        request: ''
      },
      textInfo: {
        duty: '',
        request: ''
      },
      otherInfo: {
        for_bumen: '',
        major: '',
      },
      postType: [],
      city: [],
      edu: [],
    }
  },
  head () {
    return {
      titleTemplate: (titleChunk) => {
        return `${titleChunk} - 大学生找工作、找实习`;
      }
    }
  },
  created () {
    this.jobId = this.$route.query.id || '';
    this.fetchData();
  },
  mounted () {
  },
  watch: {

  },
  computed: {

  },
  methods: {
    submit_desc (obj) {
      this.textInfo = obj;
    },
    fetchData () {
      getJobDetail({
        id: this.jobId,
      }).then(res => {
        if (res.code === 200) {
          const obj = res.data || {};
          obj.job && obj.job.cityid === 0 && (obj.job.city_cn = { name: '其他' });
          res.data.job && (this.info = res.data.job);
          this.postType = res.data.postType || [];
          this.edu = res.data.edu || [];
          obj.city && obj.city.push({ id: 0, name: '其他' })
          this.city = res.data.city || [];

          if (res.data && res.data.job && res.data.job) {
            this.textInfo = {
              duty: res.data.job.duty,
              request: res.data.job.request
            }
            this.otherInfo = {
              for_bumen: res.data.job.for_bumen,
              major: res.data.job.major
            }
          }
        } else {
          this.$message.error(res.msg || '网络错误, 稍后再试！');
        }
      }).catch(err => {
        console.error(err);
        this.$message.error(err)
      })
    },
    jumpTo (obj) {
      this.$router.push({
        path: '/company/detail',
        query: { id: obj.id }
      })
    },
    cancel () {
      this.$router.go(-1);
    },
    submit () {
      const {
        name,
        payid,
        pay_end,
        num,
        cityid,
        f_id,
        eid,
        end_time_cn,
        is_all,
      } = this.info;
      const { duty, request } = this.textInfo;
      const { for_bumen, major } = this.otherInfo;
      const paramsObj = {
        name,
        payid,
        pay_end,
        num,
        cityid,
        f_id,
        eid,
        end_time: end_time_cn,
        is_all,
        duty,
        request,
        for_bumen,
        major,
      }
      this.jobId && (paramsObj.id = this.jobId);
      console.log(JSON.stringify(paramsObj))
      updateJob(paramsObj).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg || '提交成功！');
          this.cancel();
        } else {
          this.$message.error(res.msg || '网络错误, 稍后再试！');
        }
      }).catch(err => {
        console.error(err);
        this.$message.error(err)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.inside-page {
  width: 100%;
  position: relative;

  .submit {
    margin: 60px 0;
    text-align: center;
    button {
      height: 45px;
      width: 150px;
      margin: 0 20px;
      border: 1px solid $base-color;
      border-radius: 6px;
      font-size: 16px;
      &:hover {
        box-shadow: 0 0 6px 0 $base-color;
      }
    }
    .cancel {
      background: #fff;
      color: $base-color;
    }
    .confirm {
      background: $base-color;
      color: #fff;
    }
  }
}
</style>
